<template>
	<div class="parts-define-edit-root">
		<div class="bs-tabs">
			<div>
				<el-button :type="activeFlag == index ? 'primary' : ''" size="mini" v-for="(value, index) in tabs_list"
					:key="index" @click="activeFlag = index" style="width: 15% !important;">
					{{ value.title }}
				</el-button>
				（{{ $t('message.PartsDefine.count') }} {{ this.pointCount }} {{ $t('message.PartsDefine.countUnit') }}）
			</div>
		</div>

		<PartsDefineEditThicknessTab  v-if="activeFlag == 0" :dmgCode="this.dmgCode" :tableData="this.thicknessTableData" @selectPoint="selectThicknessPoint" ref="PartsDefineEditThicknessTab" class="table-view"/>
		<PartsDefineEditInspectionTab v-if="activeFlag == 1" :dmgCode="this.dmgCode" :tableData="this.inspectionTableData" @selectPoint="selectInspectionPoint" ref="PartsDefineEditInspectionTab" class="table-view"/>

		<div class="associationButtons">
			<el-button type="primary" :disabled="this.pointCount === 0" @click="setPartsDefine">{{ $t('message.PartsDefine.setDefine') }}</el-button>
			<el-button type="primary" :disabled="this.partsDefineCount === 0" @click="releasePartsDefine">{{ $t('message.PartsDefine.releaseDefine') }}</el-button>
		</div>

		<div class="b-input">
			<div class="b-input-label">
				{{ $t('message.PartsDefine.PartsDefineEditTable.title') }} （{{ $t('message.PartsDefine.count') }} {{ this.partsDefineCount }} {{ $t('message.PartsDefine.countUnit') }}）
			</div>
		</div>

		<ux-grid class="ux-table" ref="singleTable" :data="tableData" :header-cell-style="{
			color: 'rgba(0, 0, 0, 0.85)',
			fontSize: '14px',
			textAlign: 'left',
			fontWeight: 'bold',
			padding: 0,
			height: '32px',
			background: 'rgb(244,245,246)'
		}" :cell-style="{
			color: 'rgba(96,98,102,1)',
			fontSize: '14px',
			textAlign: 'left',
			padding: 0,
			height: '32px',
		}" :checkbox-config="{
			showHeader: false,
		}" @current-change="handleTableCurrentChange" :height="tableHeight" highlight-current-row element-loading-spinner="el-icon-loading"
			element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
			<template slot="empty"> No data </template>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineEditTable.partsName')" width="180" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.partsName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineEditTable.classification')" width="60" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.classification }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineEditTable.pointNo')" width="100" align="left">
				<template slot-scope="scope">
					<p style="text-align: right;">{{ scope.row.pointNo }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineEditTable.measuringPointName')" width="180" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.measuringPointName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineEditTable.pointName')" width="180" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.pointName }}</p>
				</template>
			</ux-table-column>
			<ux-table-column property="label" :title="$t('message.PartsDefine.PartsDefineEditTable.constructionItems')" align="left">
				<template slot-scope="scope">
					<p style="text-align: left;">{{ scope.row.constructionItems }}</p>
				</template>
			</ux-table-column>
		</ux-grid>		
	</div>
</template>

<script>
import _ from 'lodash-es';
import $ from "jquery";
import { GetPartsDefineList, GetThicknessPointList, GetInspectionPointList } from "@/api/api";
import PartsDefineEditInspectionTab from "@/components/Customize/Customer127/PartsDefine/views/PartsDefineEditInspectionTab";
import PartsDefineEditThicknessTab from "@/components/Customize/Customer127/PartsDefine/views/PartsDefineEditThicknessTab";
export default {
	props: ["dmgCode", "targetParts"],
	components: {
		PartsDefineEditInspectionTab,
        PartsDefineEditThicknessTab,
    },
	// ["userInfo"],
	// dataプロパティ：変更が検知されるような値
	data() {
		return {
            tableData: [],
			thicknessTableData: [],
			inspectionTableData: [],
			tabs_list: [
                { title: this.$t('message.PartsDefine.thickness'), },
                { title: this.$t('message.PartsDefine.inspection'), },
            ],
            activeFlag: 0,
			tableHeight: 400,
			partsDefineList: [],
			thicknessPointList: [],
			inspectionPointList: [],
			selectedPartsDefine: null,
			targetThicknessPoint: null,
			targetInspectionPoint: null,
			pointCount: 0,
			partsDefineCount: 0
		}
	},
    created() {
		this.getPartsDefineList();
		this.getThicknessPointList();
		this.getInspectionPointList();
	},
	watch: {
		dmgCode(val) {
			this.selectedPartsDefine = null;
			this.targetThicknessPoint = null;
			this.targetInspectionPoint = null;
			this.getPartsDefineList();
			this.getThicknessPointList();
			this.getInspectionPointList();
		},
		activeFlag(val) {
			if (val === 0) {
				this.setPointCount(this.thicknessPointList.length);
			} else {
				this.setPointCount(this.inspectionPointList.length);
			}
		},
        partsDefineList(val) {
			this.tableData = [];
			val.forEach(element => {
				let item = {
					partsCode: element.partsCode,
					partsName: element.partsName,
					classification: element.partsDefineDivision,
					pointNo: element.pointNumber,
					measuringPointName: element.pointName,
					pointName: element.positionName,
					constructionItems: element.constructionItem,
					positionNo: element.originalCode,

				}
				this.tableData.push(item)
			});
			this.setPartsDefineCount(this.tableData.length);
		},
        thicknessPointList(val) {
			this.thicknessTableData = [];
			this.targetThicknessPoint = null;
			val.forEach(element => {
				if (element.visible === 1) {
					let item = {
						pointNo: element.pointNumber,
						measuringPointName: element.pointName,
						pointName: element.positionName,
						constructionItems: element.constructionItem,
						positionNo: element.positionNumber
					}
					this.thicknessTableData.push(item)
				}
			});
			if (this.activeFlag === 0) {
				this.setPointCount(this.thicknessTableData.length);
			}
		},
        inspectionPointList(val) {
			this.inspectionTableData = [];
			this.targetInspectionPoint = null;
			val.forEach(element => {
				if (element.visible === 1) {
					let item = {
						pointNo: element.pointNumber,
						measuringPointName: element.inspectionSurface,
						pointName: element.positionName,
						constructionItems: element.inspectionClass,
						positionNo: element.planNumber
					}
					this.inspectionTableData.push(item)
				}
			});
			if (this.activeFlag === 1) {
				this.setPointCount(this.inspectionTableData.length);
			}
		}
	},
	methods: {
		getTableHeight() {
			this.tableHeight = $(".parts-define-edit-root").height() * 0.41 + 5;
		},
		setPartsDefineCount(val) {
			this.partsDefineCount = val;
		},
		setPointCount(val) {
			this.pointCount = val;
		},
		getPartsDefineList() {
			if (this.dmgCode !== null) {
				let dto = {
					dmgCode: this.dmgCode
				}
				GetPartsDefineList(dto).then((res) => {
					if (res.data.code === 0) {
						this.partsDefineList = res.data.data;
					} else {
						this.partsDefineList = [];
						this.setPartsDefineCount(0);
					}
				});
			}
		},
		getThicknessPointList() {
			if (this.dmgCode !== null) {
				let dto = {
					dmgCode: this.dmgCode
				}
				GetThicknessPointList(dto).then((res) => {
					if (res.data.code === 0) {
						this.thicknessPointList = res.data.data;
					} else {
						this.thicknessPointList = [];
						if (this.activeFlag === 0) {
							this.setPointCount(0);
						}
					}
				});
			}
		},
		getInspectionPointList() {
			if (this.dmgCode !== null) {
				let dto = {
					dmgCode: this.dmgCode
				}
				GetInspectionPointList(dto).then((res) => {
					if (res.data.code === 0) {
						this.inspectionPointList = res.data.data;
					} else {
						this.inspectionPointList = [];
						if (this.activeFlag === 1) {
							this.setPointCount(0);
						}
					}
				});
			}
		},
		handleTableCurrentChange(val) {
			this.selectedPartsDefine = val;
		},
		selectThicknessPoint(val) {
			this.targetThicknessPoint = val;
		},
		selectInspectionPoint(val) {
			this.targetInspectionPoint = val;
		},
		setPartsDefine() {
			if (this.targetParts) {
				if (this.activeFlag == 0) {
					if (this.targetThicknessPoint) {
						this.thicknessPointList = this.thicknessPointList.map((item) => item.pointNumber === this.targetThicknessPoint.pointNo && item.positionNumber === this.targetThicknessPoint.positionNo ? {...item, visible: 0} : item);
						let item = {
							partsCode: this.targetParts.partsCode,
							partsName: this.targetParts.partsName,
							classification: this.$t('message.PartsDefine.thickness'),
							pointNo: this.targetThicknessPoint.pointNo,
							measuringPointName: this.targetThicknessPoint.measuringPointName,
							pointName: this.targetThicknessPoint.pointName,
							constructionItems: this.targetThicknessPoint.constructionItems,
							positionNo: this.targetThicknessPoint.positionNo
						}
						this.tableData.push(item);
						this.setPartsDefineCount(this.tableData.length);
						this.$emit("setDefine", this.targetParts.partsCode);
						this.targetThicknessPoint = null;
					}
				} else {
					if (this.targetInspectionPoint) {
						this.inspectionPointList = this.inspectionPointList.map((item) => item.pointNumber === this.targetInspectionPoint.pointNo && item.planNumber === this.targetInspectionPoint.positionNo ? {...item, visible: 0} : item);
						let item = {
							partsCode: this.targetParts.partsCode,
							partsName: this.targetParts.partsName,
							classification: this.$t('message.PartsDefine.inspection'),
							pointNo: this.targetInspectionPoint.pointNo,
							measuringPointName: this.targetInspectionPoint.measuringPointName,
							pointName: this.targetInspectionPoint.pointName,
							constructionItems: this.targetInspectionPoint.constructionItems,
							positionNo: this.targetInspectionPoint.positionNo
						}
						this.tableData.push(item);
						this.setPartsDefineCount(this.tableData.length);
						this.$emit("setDefine", this.targetParts.partsCode)
						this.targetInspectionPoint = null;
					}
				}
			}
		},
		releasePartsDefine() {
			if (this.selectedPartsDefine) {
				if (this.selectedPartsDefine.classification === this.$t('message.PartsDefine.thickness')) {
					let tmpList = [];
					if (this.thicknessPointList.length > 0) {
						tmpList = [...this.thicknessPointList];
					}
					let item = {
						pointNumber: this.selectedPartsDefine.pointNo,
						pointName: this.selectedPartsDefine.measuringPointName,
						positionName: this.selectedPartsDefine.pointName,
						constructionItem: this.selectedPartsDefine.constructionItems,
						positionNumber: this.selectedPartsDefine.positionNo,
						visible: 1
					}
					let index = tmpList.findIndex((element) => element.pointNumber >= item.pointNumber);
					if (index < 0) {
						tmpList.push(item);
					} else {
						tmpList.splice(index, 0, item);
					}
					this.thicknessPointList = tmpList;

					this.tableData = this.tableData.filter((item) => 
						!(item.pointName == this.selectedPartsDefine.pointName && 
						item.classification == this.selectedPartsDefine.classification && 
						item.pointNo == this.selectedPartsDefine.pointNo &&
						item.measuringPointName == this.selectedPartsDefine.measuringPointName &&
						item.pointName == this.selectedPartsDefine.pointName &&
						item.constructionItems == this.selectedPartsDefine.constructionItems)
					);
					this.setPartsDefineCount(this.tableData.length);
					this.$emit("releaseDefine", this.selectedPartsDefine.partsCode);
					this.selectedPartsDefine = null;
				} else {
					let tmpList = [];
					if (this.inspectionPointList.length > 0) {
						tmpList = [...this.inspectionPointList];
					}
					let item = {
						pointNumber: this.selectedPartsDefine.pointNo,
						inspectionSurface: this.selectedPartsDefine.measuringPointName,
						positionName: this.selectedPartsDefine.pointName,
						inspectionClass: this.selectedPartsDefine.constructionItems,
						planNumber: this.selectedPartsDefine.positionNo,
						visible: 1
					}
					let index = tmpList.findIndex((element) => element.pointNumber >= item.pointNumber);
					if (index < 0) {
						tmpList.push(item);
					} else {
						tmpList.splice(index, 0, item);
					}
					this.inspectionPointList = tmpList;

					this.tableData = this.tableData.filter((item) => !(item.pointName == this.selectedPartsDefine.pointName && 
						item.classification == this.selectedPartsDefine.classification && 
						item.pointNo == this.selectedPartsDefine.pointNo &&
						item.measuringPointName == this.selectedPartsDefine.measuringPointName &&
						item.pointName == this.selectedPartsDefine.pointName &&
						item.constructionItems == this.selectedPartsDefine.constructionItems)
					);
					this.setPartsDefineCount(this.tableData.length);
					this.$emit("releaseDefine", this.selectedPartsDefine.partsCode);
					this.selectedPartsDefine = null;
				}
			}
		},
		getSaveData() {
			return this.tableData.map((item) => ({ partsCode: item.partsCode, displayDivision: item.classification === "肉厚" ? 0 : 1, originalCode: item.positionNo }))
		},
		async cancelFn() {
			this.getPartsDefineList();
			this.getThicknessPointList();
			this.getInspectionPointList();
		}
	},
	mounted() {
		this.getTableHeight();
	},
};
</script>

<style lang="scss" scoped>
.b-input {
	// align-items: center;
	margin-top: 12px;
	margin-bottom: 12px;
	border-top: 1px solid #d3d3d3;

	.b-input-label {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.85);
		height: 24px;
		line-height: 24px;
		font-family: HelveticaNeue;
		text-align: left;
		margin-left: 10px;
	}
}
.parts-define-edit-root {
    width: 100%;
    height: 100%;
}
.bs-tabs {
    margin-top: 16px;
    width: 72%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // div {
    //     width: 50%;
    // }

    .el-button {
        margin-left: 0px;
        min-width: 155px;
        width: 155px;
        border-radius: 2px !important;
    }

    .red {
        background-color: rgb(188, 0, 15);
        color: #FFF;
    }

    .addBtn {
        .el-button {
            min-width: 82px;
            width: 82px;
            border-radius: 4px !important;
        }
    }
}

.associationButtons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-bottom: 10px;
    margin-top: 10px;
	gap: 200px;

    button {
        width: 123px;
        padding: 0 50px;
        height: 32px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        text-align: center;
        line-height: 32px;
        border-radius: 0;
    }
}
.ux-table {
	::v-deep .elx-table--body-wrapper {
		width: auto !important;
	}

	::v-deep .elx-table--empty-placeholder {
		// margin-top: 30px;
		height: 100% !important;
	}
}
</style>